.roleApplyDialog {
  :global(.mui-dialog-body) {
    overflow: hidden !important;
    flex-basis: 10000px !important;

    display: flex;
    flex-flow: column nowrap;

    .roleApplyScrollView {
      flex: 1 1 100%;
    }
  }

  .roleApplyHeader {
    display: flex;
    flex-flow: row nowrap;
    height: 40px;
    background-color: #ededed;
    align-items: center;
    .titleName {
      padding-left: 20px;
      flex: 0 0 120px;
      font-weight: bold;
    }
    .titleMessage {
      flex: 1 1 0px;
      font-weight: bold;
    }
    .titleAction {
      flex: 0 0 115px;
      font-weight: bold;
    }
  }
  .roleApplyRecord {
    &:hover {
      background-color: #f5f5f5;
    }
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    height: 56px;
    .applyUser {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      padding-left: 20px;
      padding-right: 10px;
      flex: 0 0 110px;
      overflow: hidden;
      .memberName {
        padding-left: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .applyRemark {
      flex: 1 1 0px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 20px;
    }
    .applyAction {
      flex: 0 0 120px;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      .rejectAction {
        margin-left: 20px;
        color: @dangerColor;
      }
    }
  }
}
